//表格组件
import React from 'react';
import { Table, Input, Space } from 'antd';
import Buttons from '../Button/index';
import Buttons2 from '../Button2/index';
//列
const { Search } = Input;

class Tag extends React.Component {
  state = {
    selectedRows: [], // 选中的内容
    // loading: false,
    selectedRowKeys: [],//所选下标数组
    data: [],
    Num: '',//删除时候的对应num
    Num1: ''//修改时候的对应num
  };
  columns = [
    {
      title: 'Num',
      dataIndex: 'num',
    },
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Classs',
      dataIndex: 'classs',
    },
    {
      title: 'Project',
      dataIndex: 'project',
    },
    {
      title: 'Graduate',
      dataIndex: 'graduate',
    },
    {
      title: 'Profession',
      dataIndex: 'profession',
    },
    {
      title: 'Education',
      dataIndex: 'education',
    },
    {
      title: 'Phone',
      dataIndex: 'phone',
    },
    {
      title: 'GraduateTime',
      dataIndex: 'graduateTime',//integral
    },
    {
      title: 'Integral',
      dataIndex: 'integral',
    },
    {
      title: 'Delect',
      dataIndex: 'delect',
    },
    {
      title: 'Revise',
      dataIndex: 'revise',
    }
  ];
  //模拟数据

  ccc = (val) => {//父子组件传值以及删除
    this.setState({ Num: val })
    let arr = this.state.selectedRowKeys
    // let del = this.state.data
    let index = arr.includes(val)
    console.log(index);
    if (arr.length > 0) {
      if (index === true) {
        this.hanldDelete()
      } else {
        alert('请选中')
      }
    } else {
      alert('请选中')
    }

    
  };
  ccc2 = (val) => {////父子组件传值以及修改
   console.log(val);
    this.hanldChange(val)
  };


  componentDidMount() {
    console.log('data');//dataArr
    if (JSON.parse(localStorage.getItem('data2Arr'))) {
        let  data2Arr=JSON.parse(localStorage.getItem('data2Arr'))
        this.setState({selectedRowKeys:data2Arr})
        console.log(data2Arr);
    }
    if (JSON.parse(localStorage.getItem('data2'))) {
     
      let cc = JSON.parse(localStorage.getItem('data2'))
      let aa=[]
      cc.forEach(item => {
        item.integral='学分'
        item.delect= <Buttons ccc={this.ccc}></Buttons>
        item.revise=<Buttons2 ccc={this.ccc2}></Buttons2>     
        aa.push(item)
      })
      this.setState({ data: aa })
    } else {
      let pp = []
      for (let i = 0; i < 46; i++) {
        pp.push({
          key: i,
          num: i,
          name: '名字',
          age: 32,
          classs: '班级',
          project: '藏品家里',
          graduate: '毕业学校',
          profession: '专业',
          education: '学历',
          phone: '电话',
          graduateTime: '毕业时间',
          integral:'积分',
          delect: <Buttons ccc={this.ccc}></Buttons>,
          revise: <Buttons2 ccc={this.ccc2}></Buttons2>,
        });
      }
      this.setState({ data: pp })
      // console.log(this.state.data);
      localStorage.setItem('data2', JSON.stringify(pp));
    }


  };

   //删除所选的元素
  hanldDelete = () => {
    let del = this.state.data
    let arr = this.state.selectedRowKeys
    console.log(arr);
    let del1 = del.filter((item) => {
      return item.num !== this.state.Num
    })
    let arr2 = arr.filter((item) => {
      return item !== this.state.Num
    })
    this.setState({ data: del1, selectedRowKeys: arr2 })
    localStorage.setItem('data2', JSON.stringify(del1));
    localStorage.setItem('data2Arr', JSON.stringify(arr2));
  }

  
 
  
  hanldChange = (val) => {//删除所选数据
    let Num1 = val.nums
    let { num, name, age, classs, project, graduate, profession, education, phone, graduateTime,integral } = val
    let obj = {
      key: Num1, num, name, age, classs, project, graduate, profession, education, phone, graduateTime,integral, delect: <Buttons ccc={this.ccc}></Buttons>,
      revise: <Buttons2 ccc={this.ccc2}></Buttons2>
    }
    // console.log(obj);
    let arr = this.state.data
    let arr2 = []
    arr.forEach(item => {
      if (Number(item.num) === Number(Num1)) {
        arr2.push(obj)
      } else {
        arr2.push(item)
      }
    })
    this.setState({ data: arr2 })
    localStorage.setItem('data2', JSON.stringify(arr2));
  }


  onSelectChange = (selectedRowKeys, selectedRows) => {//获取选中的元素
    console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows);
    this.setState({ selectedRows, selectedRowKeys });
    localStorage.setItem('data2Arr', JSON.stringify(selectedRowKeys));
  };
    //搜索框
    onSearch = value => {
      console.log(value);
      let arr = JSON.parse(localStorage.getItem('data'))
      let arrnum=[]
      let arrname=[]
      arr.forEach(item => {
        if (value === item.num) {
          item.integral='学分'
          item.delect = <Buttons ccc={this.ccc}></Buttons>
          item.revise = <Buttons2 ccc={this.ccc2}></Buttons2>
          arrnum.push(item)
        }
      })
      
      arr.forEach(item => {
        if (value === item.name) {
          item.delect = <Buttons ccc={this.ccc}></Buttons>
          item.revise = <Buttons2 ccc={this.ccc2}></Buttons2>
          arrname.push(item)
        }
      })
      
      
      if (arrnum.length>0) {
        this.setState({ data: arrnum })
      }else if (arrname.length>0){
        this.setState({data:arrname}) 
      }else{
        alert('请输入序号或者名字')
      }
    }
 
  render() {
    const {  selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      // onSelect: this.onGetCheckboxProps
    };
    // const hasSelected = selectedRowKeys.length > 0;
    return (
      <div>
         <Space direction="vertical">
          <Search
            placeholder="input search text"
            allowClear
            enterButton="Search"
            size="large"
            onSearch={this.onSearch}
          />
        </Space>
        <Table rowSelection={rowSelection} columns={this.columns} dataSource={this.state.data} />
      </div>
    );
  }
}
export default Tag




